
<template>
  <div id="tabbar">
    <!-- tabbar外层标签                             通过路由传递过来show==1显示     选项激活标签-->                       
    <van-tabbar route @change="funchange()" v-if="this.$route.meta.show==1" v-model="active">
      <!-- tabbar内部元素 -->
      <van-tabbar-item name="home" icon="wap-home" dot :to="tabbar.home.link">
        <span>{{tabbar.home.name}}</span>
      </van-tabbar-item>

      <van-tabbar-item name="course" icon="video" info="5" :to="tabbar.course.link">
        <span>{{tabbar.course.name}}</span>
      </van-tabbar-item>

      <van-tabbar-item name="classroom" icon="send-gift" :to="tabbar.classroom.link">
        <span>{{tabbar.classroom.name}}</span>
      </van-tabbar-item>

      <van-tabbar-item name="my" icon="friends" :to="tabbar.my.link">
        <span>{{tabbar.my.name}}</span>
      </van-tabbar-item>
    </van-tabbar>
                    <!-- 当show=2的时候显示 -->
    <Row v-else-if="this.$route.meta.show==2" style="z-index:1">
      <!-- 就业班课程内部  底部优惠券弹出组件 -->
      <van-action-sheet v-model="isshow" :title="tabbar.coupons.title">
        <p>
           <br />
          <br />
          <br />
          <br />
          <div class="detail_couponsShow">{{tabbar.coupons.content}}</div>
          <br />
          <br />
          <br />
          <br />
        </p>
      </van-action-sheet>
      <Col span="12">
      <!-- 就业班课程内部  控制弹出优惠券的按钮 -->
        <van-button
          to
          @click="isshow=!isshow"
          class="detail_couponsBtn"
          type="default"
          :text="tabbar.coupons.couponbtntitle"
        ></van-button>
      </Col>
      <Col span="12">
      <!--就业班课程内部   立即购买绿色按钮 -->
        <van-button
          to
          @click="greenClick()"
          :color="tabbar.coupons.buybtncolor"
          class="detail_buyBtn"
          type="primary"
          :text="tabbar.coupons.buybtntitle"
        ></van-button>
      </Col>
    </Row>
    <!-- 课程导航里的标签选项卡 里的 底部黄色按钮  当路由传递过来的show==4时候显示黄色立即购买按钮 -->
    <Row v-else-if="this.$route.meta.show==4">
      <Col span="24">
      <!-- 立即购买黄色按钮 -->
        <van-button
          to
          @click="greenClick()"
          :color="tabbar.tutorialbtn.btncolor"
          class="tutorialbuyBtn"
          type="primary"
          :text="price+tabbar.tutorialbtn.title"
        ></van-button>
      </Col>
    </Row>
  </div>
</template>

<script>
//导入vue
import Vue from "vue";
//iview-ui的布局组件
import { Row, Col } from "view-design";
//vant-ui的 底部导航tab,按钮,底部弹出组件
import { Tabbar, TabbarItem, Button, ActionSheet } from "vant";
//vant 注册组件
Vue.use(Tabbar)
  .use(TabbarItem)
  .use(Button)
  .use(ActionSheet);

//外部导入的首页的图标其他三个使用vant图标
import shouye from "./image/shouye.png";
import shouyeselect from "./image/shouye-select.png";

export default {
  name: "tabbar",
  //iview-ui布局组件注册
  components: {
    Row,
    Col
  },
  //属性prop导入到的数据名
  props: ["tabbar"],
  data() {
    return {
      active: 0,    //tabbar激活的变量
      isshow: false,    //优惠券底部弹出组件的显示变量
      icon: {         //首页tabbar房子图标的两种状态图片
        active: shouyeselect,
        normal: shouye
      },
      price:'￥ 102.81 '
    };
  },

  computed: {},

  watch: {},

  methods: {
    //tabbar激活切换函数
    funchange: active => {
      return active;
    },
    //立即购买绿色按钮点击事件
    greenClick: () => {
      console.log("鼠标点击");
    }
    // whiteTouch:()=>{
    //   // this.show = true;
    //   console.log('触摸点击 显示')
    // },
    // greenTouch:()=>{
    //   console.log('触摸点击')

    // }
  },
  
  created() {
    //初始传进的激活状态tabbar
    this.active = this.tabbar.first;
  },

  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 局部更改的样式 有的覆盖UI库的默认样式 */
.detail_couponsBtn {
  position: fixed;
  bottom: 0px;
  width: 50%;
  height: 50px;
  left: 0px;
}
.detail_buyBtn {
  position: fixed;
  bottom: 0px;
  width: 50%;
  height: 50px;
  right: 0px;
}
.detail_couponsShow {
  text-align: center;
}

.tutorialbuyBtn {
  position: fixed;
  bottom: 0px;
  width: 96%;
  height: 46px;
  right: 0px;
  margin: 2%;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
}
</style>